// 属性： 宽度，高度，横坐标，纵坐标，横向速度，纵向速度，对应的dom对象
const gameDmo = document.querySelector(".game"); // 获取天空元素
const gameStyles = getComputedStyle(gameDmo); // 获取元素的样式
const gameWidth = parseFloat(gameStyles.width);

// 水管类
class Pipe extends Rectangle {
  constructor({ width = 52, height, top, xSpeed, YSpeed = 0, dom, opacity }) {
    super(width, height, gameWidth, top, xSpeed, YSpeed, dom);
    this.opacity = opacity;
    this.render();
  }

  otherRender() {
    this.dom.style.opacity = this.opacity;
  }

  onMove() {
    if (this.left < -this.width) {
      // 超出的水管移除
      this.dom.remove();
    }
  }
}

// 区间随机数 辅助函数
function getRendom(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

// 水管对 单独的类
class PipePare {
  constructor({ xSpeed, opacity = 1 }) {
    const spaceHeight = 150; // 间隙高度
    const minHeight = 80; // 水管最小高度
    const maxHeight = landTop - minHeight - spaceHeight; // 水管最大高度

    const upHeight = getRendom(minHeight, maxHeight); // 上水管高度
    const downHeight = landTop - upHeight - spaceHeight; // 下水管高度
    // const upHeight = 50; // 上水管高度
    // const downHeight = 50; // 下水管高度
    const downTop = landTop - downHeight; // 下水管top值

    // 创建上下水管
    const upDom = document.createElement("div");
    upDom.className = "pipe up";
    gameDmo.appendChild(upDom);
    const downDom = document.createElement("div");
    downDom.className = "pipe down";
    gameDmo.appendChild(downDom);

    this.upPaie = new Pipe({
      height: upHeight,
      top: 0,
      dom: upDom,
      xSpeed,
      opacity,
    });

    this.downPaie = new Pipe({
      height: downHeight,
      top: downTop,
      dom: downDom,
      xSpeed,
      opacity,
    });
  }

  move(duration) {
    this.upPaie.move(duration);
    this.downPaie.move(duration);
  }

  /**
   * 判断该水管是否移出了视野
   */
  get uesLess() {
    return this.upPaie.left < -this.upPaie.width;
  }
}

/**
 * 用于源源不断生成水管对
 */
class PipePareProducer {
  constructor({ speed, tick, opacity = 1 }) {
    this.speed = speed;
    this.pares = [];
    this.tick = tick;
    this.opacity = opacity;
    this.start = false;
    this.timer = null;
  }

  /**
   * 管子变透明效果
   * @param {透明度} val
   */
  opacityFun(val = 0.2) {
    this.opacity = val;
    this.pares.forEach((pare) => {
      pare.upPaie.opacity = val;
      pare.downPaie.opacity = val;
    });
  }

  /**變化管子速度 */
  speedChange(difficulty, speedMultiplier = 1) {
    const xSpeed = -100 * difficulty * speedMultiplier;
    this.pares.forEach((pare) => {
      pare.upPaie.xSpeed = xSpeed;
      pare.downPaie.xSpeed = xSpeed;
    });
    this.speed = xSpeed;
    this.tick = 1800 / (difficulty * speedMultiplier); // 生成间隔也要相应调整
  }

  renderProduce() {
    this.pares.push(
      new PipePare({ xSpeed: this.speed, opacity: this.opacity })
    ); // 生成水管对类，并添加到数组
    // 移除用不到的柱子
    this.pares.forEach((pare, i) => {
      if (pare.uesLess) {
        this.pares.splice(i, 1);
      }
    });
  }

  removeAll() {
    this.pares.map((pare, i) => {
      pare.upPaie.dom.remove();
      pare.downPaie.dom.remove();
    });
    this.pares = [];
  }

  render() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
    if (this.start) {
      this.timer = setTimeout(() => {
        this.renderProduce();
        this.render();
      }, this.tick);
    }
  }

  startRender(tick) {
    if (tick) {
      this.tick = tick;
    }
    this.start = true;
    this.render();
  }

  stopProduce() {
    this.start = false;
    clearTimeout(this.timer);
    this.timer = null;
  }
}
